Using transform: translate() in CSS
The transform: translate() function in CSS moves an element along the X and Y axes without changing its position in the document flow. It is a part of the CSS transform property and is often used for animations, transitions, and precise element placement.
translateX(value)— moves an element horizontally by the specified amount.translateY(value)— moves an element vertically by the specified amount.translate(x, y)— moves an element both horizontally and vertically at once.translateZ(value)— moves an element along the Z-axis in 3D space.
In this example, the box smoothly moves 50px to the right and 20px down when hovered. The movement is animated because of the transition property applied to the transform.
Does not affect surrounding elements or trigger layout recalculations (unlike margin or position changes).
Provides smoother, hardware-accelerated animations.
Can be combined with other transforms like
rotate()andscale()for advanced effects.
Here, translateY(-10px) lifts the icon upward, while scale() enlarges it slightly and rotate() adds a subtle spin — all rendered smoothly through GPU acceleration.